<template>
	<view class="add_address_main pr">
		<CustomNav :navTitle="navTitle" class="nav_title"></CustomNav>
		<view class="content">
			<ul class="ulst">
				<li class="lists">
					<view>
						<span class="text_title dib">收货人姓名</span>
						<text v-if="showBtns == '3'">{{formInline.name}}</text>
						<input v-else v-model="formInline.name" class="text_info text1 input font-s30" type="text">
					</view>
				</li>
				<li class="lists">
					<view>
						<span class="text_title dib">手机号码</span>
						<text v-if="showBtns == '3'">{{formInline.mobile}}</text>
						<input v-else v-model="formInline.mobile" maxlength="11" class="text_info text1 input font-s30" type="number">
					</view>
				</li>
				<li class="lists">
					<view>
						<span class="text_title dib">邮政编号</span>
						<text v-if="showBtns == '3'">{{formInline.postcode}}</text>
						<input v-else v-model="formInline.postcode" maxlength="11" class="text_info text1 input font-s30" type="number">
					</view>
				</li>
				<li class="lists">
					<view @tap="openAddres">
						<text v-if="showBtns == '3'">{{formInline.area}}</text>
						<span v-else class="text_info text1 tips_text dib">{{formInline.area}}</span>
						<image src="@/static/image/icon-xyy.png" mode="" class="arrows"></image>
					</view>
				</li>
				<li class="lists">
					<view class="textarea">
						<text v-if="showBtns == '3'">{{formInline.address}}</text>
						<textarea v-else value="" v-model="formInline.address" placeholder="详细地址" placeholder-style="color:#a9a9a9"/>
					</view>
				</li>
			</ul>
			<simple-address ref="simpleAddress"
				:pickerValueDefault="cityPickerValueDefault"
				@onConfirm="onConfirm"
				themeColor='#CA984F'></simple-address>
			<view class="btns1" @click="submit()" v-if="showBtns !== '3'">
				{{submitText}}
			</view>
			
		</view>
	</view>
	
</template>

<script>
import simpleAddress from "@/components/simple-address/simple-address.vue";
import CustomNav from '@/components/CustomNav/index.vue';
export default {
	name: 'addAddress',
	components: {
		simpleAddress,
		CustomNav
	},
	data() {
		return {
			/** submitText */
			submitText: '',
			cityPickerValueDefault: [0, 0, 0],//弹框的初始值
			pickerText:'',
			iconfontClass: 'iconfont icon-danxuan',
			formInline: {
				id: undefined,
				/** 收货人姓名 */
				name: '',
				/** 收货人手机号 */
				mobile: '',
				// 邮政编号
				postcode: '',
				/** 收件人省市区 */
				area: '省、市、区',
				/** 地址详情 */
				address: '',
				/** 是否设为默认地址 */
				is_default: ''
			},
			/** 页面标题 */
			navTitle: '', 
			loading: false
		}
	},
	onLoad(options) {
		const optionsData = JSON.parse(options.formInline)
		/** 编辑or新增or详情 */
		if (options.btn == 1) {
			this.submitText = '保存';
			this.navTitle = '编辑地址';
		} else if (options.btn == 2) {
			this.submitText = '确认添加',
			this.navTitle = '新增地址'
		} else {
			this.navTitle = '地址详情'
		}
		
		if (optionsData !== null) {
			this.formInline = optionsData
			if (!optionsData.area) {
				this.formInline.area = '请选择省市区'
			}
		}
	},
	computed: {
		showBtns() {
			return this.options.btn;
		}
	},
	methods: {
		openAddres() {
			if (this.showBtns !== '3') {
				this.$refs.simpleAddress.open();
			}
		},
		onConfirm(e) {
			this.pickerText = JSON.stringify(e);//这个步骤只是为了让大家看到返回的数据
			this.formInline.area=e.label;//把选择的地址回显到input框中
		},
		bindTextAreaBlur: function (e) {
			console.log(e.detail.value)
		},
		/** 提交 */
		submit() {
			if (this.loading) {
				return
			}
			/** 收件人 */
			if (!this.formInline.name) {
				uni.showToast({
					title: '请输入收件人姓名',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
				return
			}
			/** 收件人手机号 */
			if (!this.formInline.mobile) {
				uni.showToast({
					title: '请输入收件人手机号',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
				return
			}
			/** 邮政编码 */
			if (!this.formInline.postcode) {
				uni.showToast({
					title: '请输入邮政编码',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
				return
			}
			/** 收货地址 */
			if (!this.formInline.area || this.formInline.area === '请选择省市区') {
				uni.showToast({
					title: '请选择收货地址',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
				return
			}
			/** 详细收货地址 */
			if (!this.formInline.address) {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
				return
			}
			this.loading = true;
			let url = '';
			if (this.submitText === '保存') {
				url = '/api/address/update_address'
			} else {
				url = '/api/address/add_address'
			}
			let parameter = {
				id: this.formInline.id, // 仅编辑有此字段
				name: this.formInline.name,  // 收货人姓名
				mobile: this.formInline.mobile, // 收货人手机号
				area: this.formInline.area, // 地区
				address: this.formInline.address, // 详细地址
				postcode: this.formInline.postcode, // 邮政编码
			};
			this.$post(url, parameter, 'post').then((res) => {
				uni.showToast({
					title: this.submitText === '保存' ? '保存地址成功' : '新增地址成功',
					icon: 'none',
					duration: 3000,
					position: 'bottom'
				});
				/** 跳转至地址列表 */
				uni.redirectTo({
					url: '../address/index'
				})
			}).catch((err) => {
				console.log(err)
			})
		}
	}
}
</script>

<style lang="less" scoped>
@import "@/asset/less/base.less";
page, .content {
	background: #fafafa;
	height: 100vh;
}
.nav_title {
	background-color: #D1A764;
}
.content {
	overflow: hidden;
	margin: 0 10rpx;
	.ulst {
		background-color: #FFFFFF;
		.lists {
			padding: 20rpx;
			border-bottom: 1px solid #eee;
			span {
				font-size: 30rpx;
			}
			.text_title {
				width: 200rpx;
				color: #a9a9a9;
			}
			.text_info {
				width: 350rpx;
				color: #333;
			}
			.tips_text {
				color: #232323;
			}
			input {
			}
			uni-input {
				display: inline-block;
				.uni-input-placeholder {
					display: inline-block;
					font-size: 30rpx;
				}
			}
			.icon {
				display: inline-block;
				padding-top: 10rpx;
				vertical-align: middle;
				.image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	.default {
		margin-left: 20rpx;
	}
	.btn_row {
		width: 35%;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.ulst .lists .iconfont {
		font-size: 32rpx;
	}
}
.textarea {
	height: 206rpx;
}
.btns1 {
	margin: 118rpx 60rpx 0;
}
.text_info {
	width: 350rpx;
	color: #000;
}
.tips_text {
	color: #999;
}
.arrows {
	width: 13rpx;
	height: 24rpx;
	float: right;
	margin-top: 15rpx;
}
</style>

